<template>
  <div class="page">
    <FCTab
      :activeKey="'1'"
      :tabList="[{ key: '1', title: '柜面领款处理'}, {key: '2', title: '2222' }]"
    >
      <div :slot="'1'">
        <FCForm
          ref="form"
          v-bind="queryForm"
          :dataset="ds1"
          :collapseForm="collapseForm"
          :controls="formControls"
          class="marginBottom"
        ></FCForm>
        <FCTable
          shouldSelect
          :scroll="{ x: '100%'}"
          :fields="queryFields"
          :data="queryData"
          shouldPagination
          :rowKey="'claimno'"
          :selectedRowKeys="selectedRowKeys"
          :onSelectChange="onSelectChange"
        ></FCTable>
        <FCPage
          direction="row"
          class="marginBottom"
        >
          <FCLayout :flex="1">
            <FCSelect
              :value="value"
              :fcstyle="{ width: '300px' }"
              :options="options"
              :onChange="
                (newValue) => {
                  this.value = newValue
                }
              "
            ></FCSelect>
          </FCLayout>
          <FCLayout
            :flex="1"
            justifyContent="end"
          >
            <a-space>
              笔数：<FCInput
                :value="selectedRowKeys.length || 0"
                disabled
                :fcstyle="{ width: '150px' }"
              ></FCInput>
              金额（记账）：<FCInput
                :value="payCount"
                disabled
                :fcstyle="{ width: '150px' }"
              ></FCInput>
            </a-space>
          </FCLayout>
        </FCPage>
        <FCPage>
          <a-space>
            <FCButton
              type="primary"
              :onClick="confirm"
            >确定</FCButton>
            <FCButton type="primary">明细重置</FCButton>
            <FCButton>取消</FCButton>
            <FCButton type="primary">提交</FCButton>
          </a-space>
        </FCPage>
        <FCPage
          direction="row"
        >
          <FCLayout
            :flex="1"
          >
            <FCTable
              style="width: 100%;"
              :scroll="submitRows.length > 0 ? { x: '100%', y: 200} : {x: '100%'}"
              :fields="submitFields"
              :data="submitRows"
              :customRow="customRow"
              @change="changeFormData"
            >
              <template slot="footer"> 合计：{{ total }} </template>
            </FCTable>
          </FCLayout>
          <FCLayout :flex="1">
            <!-- <FCForm
                    v-bind="submitForm"
                    :data="formData"
                  > </FCForm> -->
          </FCLayout>
        </FCPage>
      </div>

      <FCPage
        :slot="'2'"
        direction="column"
      >
        <FCLayout :flex="1">
          <FCLayout class="marginBottom">
            <FCForm
              ref="form"
              v-bind="queryForm"
              :dataset="ds1"
              :collapseForm="collapseForm"
              :controls="formControls"
            ></FCForm>
          </FCLayout>
          <FCLayout :flex="1">
            <FCTable
              shouldSelect
              :scroll="{ x: '100%'}"
              :fields="queryFields"
              :data="queryData"
              shouldPagination
              :rowKey="'claimno'"
              :selectedRowKeys="selectedRowKeys"
              :onSelectChange="onSelectChange"
            ></FCTable>
          </FCLayout>
        </FCLayout>
        <FCLayout>
          <FCPage direction="column">
            <FCLayout
              class="marginBottom"
              height="90px"
            >
              <FCPage direction="column">

                <FCPage
                  direction="row"
                  class="marginBottom"
                >
                  <FCLayout :flex="1">
                    <FCSelect
                      :value="value"
                      :fcstyle="{ width: '300px' }"
                      :options="options"
                      :onChange="
                (newValue) => {
                  this.value = newValue
                }
              "
                    ></FCSelect>
                  </FCLayout>
                  <FCLayout
                    :flex="1"
                    justifyContent="end"
                  >
                    <a-space>
                      笔数：<FCInput
                        :value="selectedRowKeys.length || 0"
                        disabled
                        :fcstyle="{ width: '150px' }"
                      ></FCInput>
                      金额（记账）：<FCInput
                        :value="payCount"
                        disabled
                        :fcstyle="{ width: '150px' }"
                      ></FCInput>
                    </a-space>

                  </FCLayout>
                </FCPage>
                <FCLayout>
                  <a-space>
                    <FCButton
                      type="primary"
                      :onClick="confirm"
                    >确定</FCButton>
                    <FCButton type="primary">明细重置</FCButton>
                    <FCButton>取消</FCButton>
                    <FCButton type="primary">提交</FCButton>
                  </a-space>
                </FCLayout>
              </FCPage>

            </FCLayout>
            <FCLayout :flex="1">
              <FCPage direction="row">
                <FCLayout :flex="1">
                  <FCTable
                    style="width: 100%;"
                    :scroll="submitRows.length > 0 ? { x: '100%', y: 200} : {x: '100%'}"
                    :fields="submitFields"
                    :data="submitRows"
                    :customRow="customRow"
                    @change="changeFormData"
                  >
                    <template slot="footer"> 合计：{{ total }} </template>
                  </FCTable>
                </FCLayout>
                <FCLayout :flex="1">

                  <!-- <FCForm
                    v-bind="submitForm"
                    :data="formData"
                  > </FCForm> -->
                </FCLayout>
              </FCPage>
            </FCLayout>
          </FCPage>
        </FCLayout>
      </FCPage>
    </FCTab>
  </div>
</template>

<script>
import FCPage from '@/layouts/FCPage.vue'
import FCLayout from '@/layouts/FCLayout.vue'
import FCTab from '@/vendors/fc-ui/src/controls/FCTab.vue'
import FCForm from '@/vendors/fc-ui/src/form/FCForm.vue'
import FCTable from '@/vendors/fc-ui/src/table/FCTable.vue'
import FCButton from '@/vendors/fc-ui/src/controls/FCButton.vue'
import FCSelect from '@/vendors/fc-ui/src/controls/FCSelect.vue'
import FCInput from '@/vendors/fc-ui/src/controls/FCInput.vue'
import modalA from './modalA.vue'
import FCDataset from '@/vendors/fc-dataset/FCDataset'

export default {
  name: 'VueDemo',
  components: {
    FCTab,
    FCForm,
    FCButton,
    FCTable,
    FCSelect,
    FCInput,
    FCPage,
    FCLayout,
  },

  data() {
    const ds1 = new FCDataset({
      fields: [
        { name: 'subcompany', type: 'string' },
        { name: 'currencycode', type: 'string' },
        { name: 'settlementno', type: 'string' },
      ],
      datas: [
        {
          subcompany: '111',
          currencycode: '01',
          settlementno: '333',
        },
        {
          subcompany: 'aaaaa',
          currencycode: '02',
          settlementno: 'ccc',
        },
      ],
    })

    return {
      ds1,
      queryForm: {
        cols: 4, //每行布局几列
        labelCol: 8,
        wrapperCol: 16,
        labelAlign: 'right', //对齐方式
        fields: [
          {
            name: 'subcompany',
            title: '分公司',
            controlType: 'select',
            rules: [{ required: true }],
            controlProps: {
              optionsApi: async () => {
                return [
                  { value: '3010100', label: '上海分公司' },
                  { value: '2010100', label: '江苏分公司' },
                  { value: '1010100', label: '浙江分公司' },
                ]
              },
            },
          },
          {
            name: 'currencycode',
            title: '记账币种',
            controlType: 'selectTable',
            rules: [{ required: true }],
            controlProps: {
              fields: [
                {
                  name: 'code',
                  title: '币种代码',
                },
                {
                  name: 'name',
                  title: '币种名称',
                },
              ],
              optionsLabel: 'name',
              optionsValue: 'code',
              optionsApi: async () => {
                return [
                  { code: '01', name: '人民币' },
                  { code: '02', name: '美元' },
                  { code: '03', name: '港元' },
                ]
              },
            },
          },
          {
            name: 'date',
            title: '挂账日期',
            rules: [{ required: true }],
            controlType: 'dateRangePicker',
            controlProps: {
              format: 'YYYY-MM-DD',
            },
          },
          {
            name: 'settlementno',
            title: '币种结算协议单号',
            controlType: 'input',
          },
          {
            name: 'policyno',
            title: '保单号',
            controlType: 'input',
          },
          {
            name: 'endorseno',
            title: '批单号',
            controlType: 'input',
          },
          {
            name: 'summaryno',
            title: '清单号',
            controlType: 'input',
          },
          {
            name: 'claimno',
            title: '赔案号',
            controlType: 'input',
          },
          {
            name: 'customername',
            title: '客户名称',
            controlType: 'input',
          },
          {
            name: 'payType',
            title: '业务类型',
            controlType: 'select',
            controlProps: {
              optionsApi: async () => {
                return [
                  { value: '', label: '全部' },
                  { value: '01', label: '赔款' },
                  { value: '02', label: '佣金' },
                  { value: '03', label: '比重结算协议单-批单' },
                ]
              },
            },
          },
          {
            name: 'paytypedetail',
            title: '分类',
            controlType: 'select',
            controlProps: {
              optionsOn: ['payType'],
              optionsApi: async ({ payType }) => {
                if (payType === '01') {
                  return [
                    { value: '1', label: '有账号' + payType },
                    { value: '2', label: '无账号' + payType },
                  ]
                } else if (payType === '02') {
                  return [
                    { value: '3', label: '有账号' + payType },
                    { value: '4', label: '无账号' + payType },
                  ]
                } else {
                  return [
                    { value: '5', label: '有账号' + payType },
                    { value: '6', label: '无账号' + payType },
                  ]
                }
              },
            },
          },
          {
            name: 'startamount',
            title: '记账金额',
            controlType: 'inputNumber',
          },
          {
            name: 'startamount2',
            title: '至',
            controlType: 'inputNumber',
          },
          {
            name: 'classescodename',
            title: '险种',
            controlType: 'selectModal',
            controlProps: {
              modal: modalA,
              title: '选择险种',
              width: 800,

              // optionsApi: async () => {
              //   return [
              //     { value: "01", label: "人身险" },
              //     { value: "02", label: "财产险" },
              //   ];
              // },
            },
          },
          {
            name: 'agentcode',
            title: '代理点',
            controlType: 'select',
            controlProps: {
              optionsApi: async () => {
                return [
                  { value: 'SHH001', label: '自营业务' },
                  { value: 'SHH002', label: '上海东方经营公司' },
                ]
              },
            },
          },
          {
            name: 'transactorcode',
            title: '提取人',
            controlType: 'select',
            controlProps: {
              optionsApi: async () => {
                return [{ value: 'SHH999', label: 'super' }]
              },
            },
          },
          {
            name: 'checkStatus',
            title: '审核状态',
            controlType: 'select',
            controlProps: {
              optionsApi: async () => {
                return [
                  { value: 0, label: '未审核' },
                  { value: 1, label: '审核通过' },
                  { value: 2, label: '审核失败' },
                ]
              },
            },
          },
          {
            name: 'department',
            title: '部门名称',
            controlType: 'select',
            controlProps: {
              optionsApi: async () => {
                return [
                  { value: 'SHH#HG', label: '总公司合规部' },
                  { value: 'SHH#LH', label: '总公司两核中心' },
                ]
              },
            },
          },
          {
            name: 'ifpaytax',
            title: '专票退保不退税',
            controlType: 'checkbox',
          },
          {
            name: 'orderbyply',
            title: '保单排序',
            controlType: 'checkbox',
          },
          {
            name: 'gdunitname',
            title: '跟单机构名称',
            controlType: 'input',
          },
          {
            name: 'businessattr',
            title: '保单业务性质',
            controlType: 'select',
            controlProps: {
              optionsApi: async () => {
                return [
                  { value: '01', label: '保费' },
                  { value: '02', label: '储金' },
                ]
              },
            },
          },
        ],
      },
      data: {},
      collapseForm: true,
      queryFields: [
        {
          title: '赔案号',
          name: 'claimno',
          width: 200,
          ellipsis: true,
          customRender: (text) => {
            return <a>{{ text }}</a>
          },
        },
        {
          title: '报案号',
          name: 'reportcaseno',
          width: 200,
          ellipsis: true,
        },
        {
          title: '保单号',
          name: 'policyno',
          width: 300,
          ellipsis: true,
        },
        {
          title: '批单号',
          name: 'endorseno',
          width: 300,
          ellipsis: true,
          customRender: (text) => {
            return <a>{{ text }}</a>
          },
        },
        {
          title: '清单号',
          name: 'summaryno',
          width: 300,
          ellipsis: true,
        },
        {
          title: '数据类型',
          name: 'datatype',
          width: 300,
          ellipsis: true,
        },
        {
          title: '客户名称',
          name: 'customername',
          width: 300,
          ellipsis: true,
        },
        {
          title: '本次支付(记账币种)',
          name: 'handledamount',
          width: 300,
          ellipsis: true,
        },
        {
          title: '增值税金额',
          name: 'taxesamount',
          width: 300,
          ellipsis: true,
        },
        {
          title: '专票税金',
          name: 'redtaxesamount',
          width: 300,
          ellipsis: true,
        },
        {
          title: '已开红票税金',
          name: 'redinvoicetaxesamount',
          width: 300,
          ellipsis: true,
        },
        {
          title: '专票记账税金',
          name: 'accountamount',
          width: 300,
          ellipsis: true,
        },
        {
          title: '金额（记账币种）',
          name: 'amount',
          width: 300,
          ellipsis: true,
        },
        {
          title: '保批单欠收金额',
          name: 'baseleftamount',
          width: 300,
          ellipsis: true,
        },
        {
          title: '记账币种',
          name: 'currencycode',
          width: 300,
          ellipsis: true,
        },
      ],
      queryData: [
        {
          claimno: 'C123456789',
          reportcaseno: 'R123456789',
          policyno: 'P123456789',
          endorseno: 'E123456789',
          summaryno: 'H123456789',
          datatype: 'Claim',
          customername: '客户A',
          handledamount: 1500.0,
          taxesamount: 105.0,
          redtaxesamount: 75.0,
          redinvoicetaxesamount: 50.0,
          accountamount: 1200.0,
          amount: 1600.0,
          baseleftamount: 200.0,
          currencycode: '人民币',
        },
        {
          claimno: 'C987654321',
          reportcaseno: 'R987654321',
          policyno: 'P987654321',
          endorseno: 'E987654321',
          summaryno: 'H987654321',
          datatype: 'Policy',
          customername: '客户B',
          handledamount: 2500.0,
          taxesamount: 175.0,
          redtaxesamount: 125.0,
          redinvoicetaxesamount: 100.0,
          accountamount: 2200.0,
          amount: 2600.0,
          baseleftamount: 400.0,
          currencycode: '人民币',
        },
      ],
      selectRows: [],
      selectedRowKeys: [],
      value: '1',
      options: [
        {
          label: '分别支付',
          value: '1',
        },
        {
          label: '合并支付',
          value: '2',
        },
      ],
      submitFields: [
        {
          title: '账户名称',
          name: 'accountname',
          width: 120,
          ellipsis: true,
          controlType: 'input',
        },
        {
          title: '账户名称',
          name: 'accountname',
          width: 120,
          ellipsis: true,
          controlType: 'input',
        },
        {
          title: '账户名称',
          name: 'accountname',
          width: 120,
          ellipsis: true,
          controlType: 'input',
        },
        {
          title: '账户名称',
          name: 'accountname',
          width: 120,
          ellipsis: true,
          controlType: 'input',
        },
        {
          title: '账户名称',
          name: 'accountname',
          width: 120,
          ellipsis: true,
          controlType: 'input',
        },
        {
          title: '账户名称',
          name: 'accountname',
          width: 120,
          ellipsis: true,
          controlType: 'input',
        },
        {
          title: '账户名称',
          name: 'accountname',
          width: 120,
          ellipsis: true,
          controlType: 'input',
        },
        {
          title: '账户名称',
          name: 'accountname',
          width: 120,
          ellipsis: true,
          controlType: 'input',
        },
        {
          title: '账户名称',
          name: 'accountname',
          width: 120,
          ellipsis: true,
          controlType: 'input',
        },
        {
          title: '账户名称',
          name: 'accountname',
          width: 120,
          ellipsis: true,
          controlType: 'input',
        },
        //
        {
          title: '账户名称',
          name: 'accountname',
          width: 120,
          ellipsis: true,
          controlType: 'input',
        },
        {
          title: '本次付款金额',
          name: 'handledamount',
          width: 120,
          ellipsis: true,
          controlType: 'inputNumber',
        },
        {
          title: '记账币种',
          name: 'currencycode',
          width: 120,
          ellipsis: true,
          controlType: 'input',
        },
        {
          title: '票据类型',
          name: 'checktype',
          width: 120,
          ellipsis: true,
          controlType: 'input',
        },
        {
          title: '单据号码',
          name: 'billno',
          width: 120,
          ellipsis: true,
          controlType: 'input',
        },
        {
          title: '支付方式',
          name: 'paymode',
          width: 120,
          ellipsis: true,
          controlType: 'select',
        },
        {
          title: '客户名称',
          name: 'customername',
          width: 120,
          ellipsis: true,
          controlType: 'input',
        },
        {
          title: '付款原因',
          name: 'payreason',
          width: 120,
          ellipsis: true,
          controlType: 'input',
        },
      ],
      submitData: [
        {
          accountname: 111,
          handledamount: 222,
          currencycode: 333,
          endorseno: 444,
          billno: 555,
          paymode: '666',
          branchCode: '1111',
          priceType: 'aaaa',
        },
        {
          accountname: 111,
          handledamount: 222,
          currencycode: 333,
          endorseno: 444,
          billno: 555,
          paymode: '666',
          branchCode: '2222',
          priceType: 'bbbb',
        },
      ],
      index: null,
      submitRows: [
        {},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},
        {},{},{},{},{},{},{},{},{},{},
      ],
      // submitRows: [],
      submitForm: {
        cols: 2, //每行布局几列
        labelCol: 8,
        wrapperCol: 16,
        labelAlign: 'right', //对齐方式
        fields: [
          {
            name: 'customername',
            title: '客户名称',
            controlType: 'input',
          },
          {
            name: 'custaccountno',
            title: '客户账号',
            controlType: 'input',
          },
          {
            name: 'custbankno',
            title: '客户银行代码',
            controlType: 'input',
          },
          {
            name: 'bankname',
            title: '开户行',
            controlType: 'input',
          },
          {
            name: 'payeeprovince',
            title: '开户行省',
            controlType: 'input',
          },
          {
            name: 'payeecity',
            title: '开户行市',
            controlType: 'input',
          },
          {
            name: 'inpaymentbatchno',
            title: '票据用途',
            controlType: 'input',
          },
          {
            name: 'checkdate',
            title: '票据日期',
            controlType: 'input',
          },
          {
            name: 'checkno',
            title: '票据号码',
            controlType: 'input',
          },
        ],
      },
      formData: {},
    }
  },
  computed: {
    payCount() {
      return this.selectRows.reduce(
        (accumulator, current) => accumulator + current.amount,
        0
      )
    },
    total() {
      return this.submitRows.reduce((accumulator, current) => {
        return accumulator + current.handledamount
      }, 0)
    },
    formControls() {
      return [
        {
          title: 'doit',
          // onClick() {
          //   console.log('>>>', this)
          // },
          onClick: () => {
            console.log('>>>>', this)
            this.ds1.setFieldsValue({ currencycode: '03' })
          },
        },
        {
          title: '查询',
          buttonType: 'primary',
          onClick: () => {
            console.log('>>>>', JSON.stringify(this.ds1.getFieldsValue()))
            // this.query()
          },
        },
        {
          title: '重置',
          onClick: () => {
            // this.reset()
            if (!this.ds1.goNext()) {
              this.ds1.goPrevious()
            }
            console.log(
              '>>>> full values:',
              JSON.stringify(this.ds1.getValues(), null, 2)
            )
            // console.log('>>>>>', this.ds1.goNext())
          },
        },
        {
          title: this.collapseForm ? '展开' : '收起',
          buttonType: 'link',
          onClick: () => {
            this.collapseForm = !this.collapseForm
          },
        },
      ]
    },
  },
  methods: {
    //查询
    query() {},
    //重置
    reset() {
      this.$refs.form.resetFields()
    },
    customRow(record, index) {
      return {
        style: {
          'background-color': index === this.index ? '#e6f7ff' : '',
        },
        on: {
          click: () => {
            this.index = index
            this.changeFormData(record)
          },
        },
      }
    },
    //选择
    onSelectChange(selectedRowKeys, selectRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectRows = selectRows
    },
    //确定
    confirm() {
      const { value, selectRows, payCount } = this
      if (value === '1') {
        this.submitRows = JSON.parse(JSON.stringify(selectRows))
      } else {
        let row = selectRows.length ? selectRows[0] : {}
        row.handledamount = payCount
        this.submitRows = JSON.parse(JSON.stringify([row]))
      }
    },
    //table改变修改form数据
    changeFormData(record) {
      this.formData = record
    },
  },
}
</script>

<style scoped lang="less">
.page {
  padding: 10px;
  background: #fff;
  .marginBottom {
    margin-block: 10px;
  }
}
</style>
